<!-- 关闭Tab时顶部标题 -->
<div class="layui-body-header">
    <span class="layui-body-header-title">权限管理</span>
    <span class="layui-breadcrumb pull-right">
        <a href="#/">首页</a>
        <a><cite>权限管理</cite></a>
    </span>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">搜索：</label>
                        <div class="layui-input-inline mr0">
                            <input id="authEdtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="authBtnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="authBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="authTable" lay-filter="authTable"></table>

        </div>
    </div>

</div>

<!-- 表格操作列 -->
<script type="text/html" id="authTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'table', 'admin', 'http', 'treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var http = layui.http;
        var treetable = layui.treetable;

        // 渲染表格
        function renderAuthTable() {
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'authorityId',
                treePidName: 'parentId',
                elem: '#authTable',
                url: http.base_server + 'authorities.json',
                cellMinWidth: 100,
                cols: [[
                    {type: 'numbers'},
                    {field: 'authorityName', minWidth: 200, title: '权限名称'},
                    {field: 'authority', title: '权限标识'},
                    {field: 'menuUrl', title: '菜单url'},
                    {field: 'orderNumber', minWidth: 80, align: 'center', title: '排序号'},
                    {
                        minWidth: 80, align: 'center', templet: function (d) {
                            if (d.isMenu == 1) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.parentId == -1) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#authTableBar', minWidth: 120, align: 'center', title: '操作'}
                ]]
            });
        }

        renderAuthTable();

        // 添加按钮点击事件
        $('#authBtnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(authTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDelete(obj.data.authorityId);
            }
        });

        // 删除
        function doDelete(authorityId) {
            layer.confirm('确定删除此权限吗？', {
                skin: 'layui-layer-admin'
            }, function () {
                layer.load(2);
                admin.req('user_state.json', {
                    authorityId: authorityId
                }, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1});
                        renderAuthTable();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, 'get');
            });
        }

        // 显示表单弹窗
        function showEditModel(data) {
            admin.putTempData('t_authoritie', data);
            admin.open({
                title: data ? '修改权限' : '添加权限',
                url: 'views/system/authForm.html',
                success: function (layero, index) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');  // 禁止出现滚动条
                }
            });
        }

        // 搜索按钮点击事件
        $('#authBtnSearch').click(function () {
            var keyword = $('#authEdtSearch').val();
            var $tds = $('#authTable').next('.treeTable').find('.layui-table-body tbody tr td');
            if (!keyword) {
                $tds.css('background-color', 'transparent');
                layer.msg("请输入关键字", {icon: 5});
                return;
            }
            var searchCount = 0;
            $tds.each(function () {
                $(this).css('background-color', 'transparent');
                if ($(this).text().indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        var wrapperDOM = '.layui-body>.layui-fluid';
                        if (http.pageTabs) {
                            wrapperDOM = '.layui-tab-item.layui-show';
                        }
                        $(wrapperDOM).stop(true);
                        $(wrapperDOM).animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            } else {
                treetable.expandAll('#authTable');
            }
        });

    });
</script>